<!-- 编辑弹窗 -->
<template>
  <ele-modal
    inner
    fullscreen
    :visible="visible"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    :title="'产品单列表'"
    @update:visible="updateVisible" :before-close="handleClose"
  >
    <div class="ele-body">
      <productSearch @search="reload"  />
      <el-card>
      <!-- 搜索表单 -->
      <el-row :gutter="24">
        <el-col  :md="24" :sm="24">
          <ele-pro-table ref="table"  row-key="id" :selection.sync="selection"  :columns="allorderColumns"  :datasource="datasource"   @done="onDone" :need-page="true"  :height="tableHeight" :full-height="tableFullHeight" @selection-change="handleSelectionChange">
          </ele-pro-table>
        </el-col>
      </el-row>
      
      </el-card>
    </div>
    <div slot="footer">
      <el-button type="primary" :loading="loading" @click="save" >
        确定
      </el-button>
    </div>
  </ele-modal>
</template>

<script>
  
  import productSearch from './product-search.vue';
  import { QueryStockByCondition } from '@/api/inventory/stock';
 
  export default {
    name: 'SwaporderProductChooseList',
    components: {productSearch},
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
    },
    data() {
      return {
        fixedHeight:true,
        // 表单数据
        form: {},
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        selectRows:[],
        //表格选中数据(多选)，如果要回显选中数据可在 done 事件里面使用 setSelectedRowKeys 方法
        selection: [],
        // 表格列配置
        allorderColumns: [
          {type:"selection",columnKey: 'selection',label: '选择', width: 50, align: 'center',fixed: 'left'},
          {prop: 'productCode', label: '产品编号', showOverflowTooltip: true, align: 'center',},
          {prop: 'productName', label: '产品名称', showOverflowTooltip: true,align: 'center',},
          {prop: 'spc', label: '规格', showOverflowTooltip: true, align: 'center',},
          {prop: 'unitDesc', label: '单位', showOverflowTooltip: true, align: 'center',},
          {prop: 'costPrice', label: '成本单价', showOverflowTooltip: true, align: 'center',},
          // {prop: 'salePrice', label: '销售单价', showOverflowTooltip: true, sortable: 'code',align: 'center',},
          // {prop: 'costTotalPrice', label: '库存金额', showOverflowTooltip: true, sortable: 'code',align: 'center',},
          {prop: 'purQty', label: '在途数量', showOverflowTooltip: true, align: 'center',},
          {prop: 'lockQty', label: '锁定数量', showOverflowTooltip: true, align: 'center',},
          {prop: 'stockQty', label: '库存数量', showOverflowTooltip: true, align: 'center',},
          {prop: 'useQty', label: '可用数量',width: 300, showOverflowTooltip: true, align: 'center',},
          // {prop: 'supplierDesc', label: '供应商', showOverflowTooltip: true,sortable: 'typeId',align: 'center',},
          {prop: 'wareHouseDesc', label: '仓库', showOverflowTooltip: true, align: 'center',},
        ],
      };
    },

    computed: {
      // 表格高度
      tableHeight() {
        var fh = this.fixedHeight ? 'calc(100vh - 380px)' : void 0;
        return fh;
      },
      // 表格全屏时高度
      tableFullHeight() {
        var fh =  this.fixedHeight ? 'calc(100vh - 280px)' : null;
        return fh;
      },
    },
   created(){
   },
    methods: {
      
      /* 表格数据源 */
      async datasource(params) {
        
        params.where.pageindex = params.page;
        params.where.pagesize = params.limit;

        //添加排序
        if(params.order.order == null || params.order.order == undefined){
          params.where.orderBys = [{ sort: "createDate", order: 1, }];
        }else{
          params.where.orderBys = [];
          params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
        }

        if(!params.where.conditions) params.where.conditions = {};

        /*出库仓库Id*/
        if(this.data.outWareHouseId){
          params.where.conditions.wareHouseId = this.data.outWareHouseId;
        }

        params.where.conditions.isUpuseQty = true;

        let data = await QueryStockByCondition(params.where);
        
        this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
        return {
            list:data.items,
            count:data.totalrecords,
        };
      },

      save(){

        if(this.selectRows.length==0){
          this.$message({
            message: '没有选择产品',
            type: 'warning'
          });
        }else{

          let rows = this.selectRows.find((d)=>{ return d.useQty<=0});
          if(rows){
            this.$message({
            message: '选择产品可用数量要大于零',
            type: 'warning'
            });
          }else{
            this.$emit('callback',this.selectRows );
            this.$emit('update:visible', false);
          }
        }
      },

      /* 表格渲染完成回调 */
      onDone({ data }) {

      },

      //选择行数据
      handleSelectionChange(val) {
        this.selectRows = [];
        this.selectRows = val;
      },

      /* 刷新表格 */
      reload(where) {
        if(this.$refs.table){
          this.$refs.table.reload({ where: where });
        }
      },

      /* 更新visible */
      updateVisible(value) {
        //更新父组件中的visible的值
        this.$emit('update:visible', value);
      },

      handleClose() {
        //更新父组件中的visible的值
        this.$emit('update:visible', false);
      },
      
    },
    /* 监听visible属性变化 */
    watch: {
      visible(visible) {
        this.selection = [];
        this.selectRows = [];
        this.reload();
        if (visible) {
          if (this.data && this.data.outWareHouseId) {
            //赋值this.form
            this.isUpdate = false;
          } else {
            this.form={};
            this.isUpdate = false;
          }
        } else {
            this.form = {};
            this.selection = [];
            this.selectRows = [];
        }
      }
    }
  };
</script>
<style scoped>

  
  </style>